<template>
  <div class="ads-box" v-if="isShow">
    <ad-card :data="data" @toggleAds="toggleAds()" :isShow="isShow" v-if="data" />
    <ad-placeholder @click="slotAds(spaceCode)" v-else />
  </div>
</template>

<script>
import {
  defineComponent
} from 'vue';
import {
  mapState
} from 'vuex';
import AdCard from './AdCard.vue';
import AdPlaceholder from './AdPlaceholder.vue';
import mutiLine from '@/mixins/text-line';
import clickEvents from '@/mixins/rsr-slot';

export default defineComponent({
  name: 'SAds',
  components: {
    AdCard,
    AdPlaceholder
  },
  props: {
    spaceCode: {
      type: String,
      required: true
    }
  },
  mixins: [mutiLine, clickEvents],
  data() {
    return {
      data: null,
      dims: sa.$sys.getCurd(),
      isShow: true
    };
  },
  computed: {
    ...mapState({
      ads: state => state.ads.ads
    }),
    currentAd() {
      return this.ads[this.spaceCode] || null;
    }
  },
  watch: {
    currentAd: {
      handler(newAd) {
        this.data = newAd;
      },
      immediate: true
    }
  },
  methods: {
    toggleAds() {
      this.isShow = !this.isShow;
    }
  }
});
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.ads-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  border-radius: 8px;
  margin-bottom: 16px;
  transition:
    transform var(--ad-transition),
    box-shadow var(--ad-transition),
    background var(--ad-transition);
  will-change: transform, box-shadow;

  &:hover {
    background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);
    box-shadow: var(--shadow-lg);
  }
}

@media (max-width: 768px) {
  .ads-box {
    padding: 15px;
    min-height: 150px;
  }
}
</style>
